<template>
  <div style="height:460px;position: relative;">
    <IEcharts v-if="option.series[0].data.length!==0"
              :option="option" />
    <div style="text-align:center"
         v-else>
      <p><b style="font-size:18px;">不满意件类别统计</b></p>
      <p style="margin-top:60px;">暂无数据</p>
    </div>
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  export default {
    components: {
      IEcharts
    },
    props: {
      dateItem: {
        type: String,
        default: ''
      },
      dateList: {
        type: Array,
        default: []
      }
    },
    watch: {
      dateItem: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue) {
              // console.log('cao1')
              this.dateType = 'i'
              this.getData()
            }

          }
        },
        deep: true
      },
      dateList: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue.length !== 0) {
              this.dateType = 'd'
              this.getData()
              // console.log('cao2')
            }

          }
        },
        immediate: true,
        deep: true
      },
    },
    data () {
      return {
        dateType: 'i',
        option: {
          title: {
            text: '工单内容类别统计',
            x: 'center'
          },
          color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
          // tooltip: {
          //   trigger: 'item',
          //   formatter: "{a} <br/>{b} : {c} ({d}%)"
          // },
          grid: {
            left: '20%',
            right: '25%',
            top: '180px',
            bottom: '50px',
            containLabel: false
          },
          // legend: {
          //   type: "scroll",
          //   orient: 'vertical',
          //   right: '20%',
          //   align: 'left',
          //   top: 'middle',
          //   textStyle: {
          //     color: '#8C8C8C'
          //   },
          // },
          series: [
            {
              name: '业务警种',
              type: 'pie',
              radius: [0, 150],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              hoverAnimation: false,
              data: [
              ],
              "label": {
                "normal": {
                  formatter: function (params) {
                    return '{icon|▬}{name|' + params.name + '：}{value|' +
                      params.value + '}'
                  },
                  show: true,
                  rich: {
                    icon: {
                      fontSize: 10
                    },
                    name: {
                      fontSize: 16,
                      padding: [0, 10, 0, 4],
                      // color: '#666666'
                    },
                    value: {
                      fontSize: 18,
                      fontWeight: 'bold',
                      color: '#333333'
                    }
                  }
                }
              },
            }
          ]
        }
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        let cont = {
          dateItem: this.dateItem,
          dateList: this.dateList,
          dateType: this.dateType,
        }
        this.$axios.post(this.$api.countCharts.contentCategoryCharts, cont).then(res => {
          // console.log('6666666', res.category)
          this.option.series[0].data = res.category.map(
            item => {
              return { 'name': item.name, 'value': item.value }
            }
          )
        })
      }
    }
  }
</script>

<style>
</style>
